<template>
  <Layout :items="['合同管理']">
    <!-- 查询栏 -->
      <el-form :inline="true">
        <el-form-item>
          <el-select
            placeholder="合同类型"
            v-model="searchForm.contract_type"
            style="width: 300px"
            clearable
          >
            <el-option
              v-for="item in contract_typeData"
              :key="item"
              :label="item"
              :value="item"
              >{{ item }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="付款方式"
            v-model="searchForm.pay_type"
            style="width: 300px"
            clearable
          >
            <el-option
              v-for="item in pay_type"
              :key="item"
              :label="item"
              :value="item"
              >{{ item }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="time"
            value-format="YYYY-MM-DD"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="合同名称"
            type="text"
            v-model="searchForm.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="服务企业"
            type="text"
            v-model="searchForm.service_company"
            clearable
          ></el-input>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findData">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="
                (searchForm.contract_type = ''),
                  (searchForm.service_company = ''),
                  (searchForm.pay_type = ''),
                  (searchForm.name = ''),
                  (searchForm.service_company = ''),
                  (time = ''),
                  getData()
              "
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="active = true"> 添加</el-button>
          </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="contractData" style="width: 100%">
      <el-table-column align="center" prop="number" width="130" label="编号" />
      <el-table-column
        align="center"
        prop="name"
        width="130"
        label="合同名称"
      />
      <el-table-column
        align="center"
        prop="industry"
        width="130"
        label="行业领域"
      />
      <el-table-column
        align="center"
        prop="undertaking_department"
        width="120"
        label="承接部门"
      />
      <el-table-column
        align="center"
        prop="service_company"
        width="130"
        label="服务企业"
      />
      <el-table-column
        align="center"
        prop="sign_people"
        width="130"
        label="签订人"
      />
      <el-table-column
        align="center"
        prop="handle_people"
        width="150"
        label="经手人"
      />
      <el-table-column
        align="center"
        prop="sign_data"
        width="170"
        label="签订日期"
      />
      <el-table-column
        align="center"
        prop="contract_type"
        width="180"
        label="合同类型"
      />
      <el-table-column
        align="center"
        prop="contract_status"
        width="100"
        label="合同状态"
      />
      <el-table-column
        align="center"
        prop="service_term"
        width="100"
        label="服务期限"
      />
      <el-table-column
        align="center"
        prop="contract_money"
        width="100"
        label="合同金额"
      />
      <el-table-column
        align="center"
        prop="pay_type"
        width="100"
        label="付款方式"
      />
      <el-table-column align="center" width="300" label="合同日期">
        <template #default="{ row }">
          <p>{{ row.start_data }}至{{ row.end_data }}</p>
        </template>
      </el-table-column>

      <el-table-column width="130" label="操作" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="editShow(row.id)"
          ></el-button>
          <el-button
            type="danger"
            :icon="Delete"
            circle
            @click="deleteHandle(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="height: 60px" justify="center" align="middle">
      <!-- 分页器 layout分页器布局<> -->
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        v-model:page-size="limit"
        v-model:current-page="page"
        @current-change="getData"
      />
    </el-row>
  </Layout>

  <!-- 添加 -->
  <el-dialog v-model="active" width="50%">
    <el-form
      label-width="150px"
      :model="contractForm"
      ref="addContractRef"
      :rules="addRules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input type="text" v-model="contractForm.name"></el-input>
          </el-form-item>
          <el-form-item label="领域" prop="industary">
            <el-select
              placeholder="行业领域"
              clearable
              v-model="contractForm.industry"
            >
              <el-option
                v-for="item in industaryData"
                :key="item"
                :label="item"
                :value="item"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="承接部门" prop="undertaking_department">
            <el-input
              v-model="contractForm.undertaking_department"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务企业" prop="service_company">
            <el-input
              v-model="contractForm.service_company"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="签订人" prop="sign_people">
            <el-input v-model="contractForm.sign_people" type="text"></el-input>
          </el-form-item>
          <el-form-item label="经手人" prop="handle_people">
            <el-input
              v-model="contractForm.handle_people"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="签订日期" prop="sign_data">
            <el-input v-model="contractForm.sign_data" type="text"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同类型" prop="contract_type">
            <el-select
              v-model="contractForm.contract_type"
              placeholder="请选择合同类型"
            >
              <el-option
                v-for="item in contract_typeData"
                :key="item"
                :label="item"
                :value="item"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="合同状态" prop="contract_status">
            <el-select v-model="contractForm.contract_status">
              <el-option
                v-for="item in contract_statusData"
                :key="item"
                :label="item"
                :value="item"
              >
                {{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="服务期限" prop="service_term">
            <el-input
              v-model="contractForm.service_term"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同金额" prop="contract_money">
            <el-input
              v-model="contractForm.contract_money"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款方式" prop="pay_type">
            <el-select v-model="contractForm.pay_type">
              <el-option
                v-for="item in pay_type"
                :key="item"
                :label="item"
                :value="item"
              >
                {{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="合同开始时间" prop="start_data">
            <el-date-picker v-model="contractForm.start_data" type="date" />
          </el-form-item>
          <el-form-item label="合同结束时间" prop="end_data">
            <el-date-picker v-model="contractForm.end_data" type="date" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form>
      <el-row :gutter="24">
        <el-col :span="4" :offset="8">
          <el-button type="primary" @click="addSubmit">提交</el-button>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-button type="warning" @click="addReset(addContractRef)"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>

  <!-- 编辑 -->
  <el-dialog v-model="show" width="50%">
    <el-form
      label-width="150px"
      :model="editForm"
      ref="editRef"
      :rules="addRules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input type="text" v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="领域" prop="industary">
            <el-select
              placeholder="行业领域"
              clearable
              v-model="editForm.industry"
            >
              <el-option
                v-for="item in industaryData"
                :key="item"
                :label="item"
                :value="item"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="承接部门" prop="undertaking_department">
            <el-input
              v-model="editForm.undertaking_department"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务企业" prop="service_company">
            <el-input v-model="editForm.service_company" type="text"></el-input>
          </el-form-item>
          <el-form-item label="签订人" prop="sign_people">
            <el-input v-model="editForm.sign_people" type="text"></el-input>
          </el-form-item>
          <el-form-item label="经手人" prop="handle_people">
            <el-input v-model="editForm.handle_people" type="text"></el-input>
          </el-form-item>
          <el-form-item label="签订日期" prop="sign_data">
            <el-input v-model="editForm.sign_data" type="text"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同类型" prop="contract_type">
            <el-select
              v-model="editForm.contract_type"
              placeholder="请选择合同类型"
            >
              <el-option
                v-for="item in contract_typeData"
                :key="item"
                :label="item"
                :value="item"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="合同状态" prop="contract_status">
            <el-select v-model="editForm.contract_status">
              <el-option
                v-for="item in contract_statusData"
                :key="item"
                :label="item"
                :value="item"
              >
                {{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="服务期限" prop="service_term">
            <el-input v-model="editForm.service_term" type="text"></el-input>
          </el-form-item>
          <el-form-item label="合同金额" prop="contract_money">
            <el-input v-model="editForm.contract_money" type="text"></el-input>
          </el-form-item>
          <el-form-item label="付款方式" prop="pay_type">
            <el-select v-model="editForm.pay_type">
              <el-option
                v-for="item in pay_type"
                :key="item"
                :label="item"
                :value="item"
              >
                {{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="合同开始时间" prop="start_data">
            <el-date-picker v-model="editForm.start_data" type="date" />
          </el-form-item>
          <el-form-item label="合同结束时间" prop="end_data">
            <el-date-picker v-model="editForm.end_data" type="date" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form>
      <el-row :gutter="24">
        <el-col :span="4" :offset="8">
          <el-button type="primary" @click="upContract">更新</el-button>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-button type="warning" @click="show = false">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { Edit, Delete } from "@element-plus/icons-vue";
import {
  getContract,
  addContract,
  getoneContract,
  editContract,
  deleteContract,
} from "../api/api";
import { ref, onMounted, reactive } from "vue";
import {
  ElMessage,
  ElMessageBox,
  type FormInstance,
  type FormRules,
} from "element-plus";

const page = ref(1);
const limit = ref(5);
const total = ref(0);
const contractData = ref<
  {
    number: number;
    name: string;
    industry: string;
    undertaking_department: string;
    service_company: string;
    sign_people: string;
    handle_people: string;
    sign_data: string;
    contract_type: string;
    contract_status: string;
    service_term: string;
    contract_money: number;
    pay_type: string;
    start_data: string;
    end_data: string;
  }[]
>();

const getData = async () => {
  const res = await getContract({ page: page.value, limit: limit.value });
  contractData.value = res.data.data.row;
  total.value = res.data.data.count;
};
onMounted(() => {
  getData();
});

//查询

const searchForm = reactive({
  contract_type: "",
  pay_type: "",
  contract_status: "",
  name: "",
  service_company: "",
  start_data: "",
  end_data: "",
});
const contract_typeData = ["长期合同", "短期合同"];
const pay_type = ["微信支付", "银行卡支付", "扫码支付"];

/* const time=computed({
    get:()=>{
        return 1;
    },
    set:(val)=>{
        
    }
}) */
const time = ref("");
const findData = async () => {
  page.value = 1;
  searchForm.start_data = time.value[0];
  searchForm.end_data = time.value[1];
  console.log(time);
  const quare: any = { page: page.value, limit: limit.value };
  if (searchForm.contract_status) {
    quare.contract_status = searchForm.contract_status;
  }
  if (searchForm.contract_type) {
    quare.contract_type = searchForm.contract_type;
  }
  if (searchForm.end_data) {
    quare.end_data = searchForm.end_data;
  }
  if (searchForm.name) {
    quare.name = searchForm.name;
  }
  if (searchForm.pay_type) {
    quare.pay_type = searchForm.pay_type;
  }
  if (searchForm.service_company) {
    quare.service_company = searchForm.service_company;
  }
  if (searchForm.start_data) {
    quare.start_data = searchForm.start_data;
  }
  const res = await getContract(quare);
  contractData.value = res.data.data.row;
  total.value = res.data.data.count;
};
/* const reset=(searchForm,time1:Array)=>{
    searchForm.contract_type = '',
     searchForm.service_company = '',
      searchForm.pay_type = '',
       searchForm.name = '', 
       searchForm.service_company = '',
        time = [],
        getData()
} */

//添加
const active = ref(false);
const contractForm = reactive({
  number: 1,
  name: "",
  industry: "",
  undertaking_department: "",
  service_company: "",
  sign_people: "",
  handle_people: "",
  sign_data: "",
  contract_type: "",
  contract_status: "",
  service_term: "",
  contract_money: 0,
  pay_type: "",
  start_data: "",
  end_data: "",
});
const industaryData = [
  "风力",
  "电力",
  "农业",
  "水利",
  "林业",
  "应急",
  "省市县一体化",
  "煤矿",
  "消防武警",
  "企业",
  "数据服务",
  "政府机关",
  "新能源",
  "地质",
  "内涝",
  "保险",
  "天然氧吧",
  "气候可行性论证",
  "影视及广告",
  "航空",
  "直属兄弟单位",
  "气候好产品",
  "气象灾害风险普查",
  "三大运营商",
  "高速交通",
];

const contract_statusData = ["拟稿中", "已批准", "执行中", "决算中"];
const addContractRef = ref<FormInstance>();
const addRules: FormRules = {
  name: { required: true, message: "请输入合同名称", trigger: "blur" },
  industry: { required: true, message: "请选择行业领域", trigger: "blur" },
  undertaking_department: {
    required: true,
    message: "承接部门",
    trigger: "blur",
  },
  service_company: { required: true, message: "服务企业", trigger: "blur" },
  sign_people: { required: true, message: "签订人", trigger: "blur" },
  handle_people: { required: true, message: "经手人", trigger: "blur" },
  sign_data: { required: true, message: "签订日期", trigger: "blur" },
  contract_type: { required: true, message: "请选择合同类型", trigger: "blur" },
  contract_status: {
    required: true,
    message: "请选择合同状态",
    trigger: "blur",
  },
  service_term: { required: true, message: "请输入服务期限", trigger: "blur" },
  contract_money: {
    required: true,
    message: "请输入合同金额",
    trigger: "blur",
  },
  pay_type: { required: true, message: "请选择付款方式", trigger: "blur" },
  start_data: { required: true, message: "请输入开始日期", trigger: "blur" },
  end_data: { required: true, message: "请输入结束日期", trigger: "blur" },
};
const addReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const addSubmit = () => {
  addContractRef.value?.validate(async (val) => {
    if (val) {
      const res = await addContract(contractForm);
      if (res.data.data.code === 10000) {
        ElMessage.success("添加成功");
        active.value = false;
      } else {
        ElMessage.warning("添加失败");
      }
    }
  });
};

//编辑
const editForm = ref({
  number: 1,
  name: "",
  industry: "",
  undertaking_department: "",
  service_company: "",
  sign_people: "",
  handle_people: "",
  sign_data: "",
  contract_type: "",
  contract_status: "",
  service_term: "",
  contract_money: 0,
  pay_type: "",
  start_data: "",
  end_data: "",
});
const show = ref(false);
const editRef = ref<FormInstance>();
const editShow = async (id: number) => {
  const res = await getoneContract(id);
  editForm.value = res.data.data;
  show.value = true;
};
const upContract = () => {
  editRef.value?.validate(async (val) => {
    if (val) {
      const res = await editContract(editForm.value, editForm.value.number);
      if (res.data.data.code === 10000) {
        ElMessage.success("修改成功");
        show.value = false;
      } else {
        ElMessage.error("修改失败");
      }
    }
  });
};

//删除
const deleteHandle = (id: number) => {
  ElMessageBox.confirm("确认删除  " /* 内容 */, "警告" /* 标题 */, {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await deleteContract(id);
      if (res.data.data.code === 10000) {
        ElMessage.success("删除成功");
        getData();
      }
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "删除失败",
      });
    });
};
</script>

<style scoped></style>
